<template>
    <waterfall :line-gap="230" :watch="items" id="myDIV2" v-loading="loading">
        <!-- each component is wrapped by a waterfall slot -->
        <waterfall-slot
                v-for="(item, index) in items"
                :width="item.width"
                :height="item.height"
                :order="index"
                :key="item.id"
        >
            <v-Employee :item="item" :index="index" class="item" 　@transferEmployee="getEmployee"
                        @deleteEmployee="deleteEmployee"></v-Employee>
        </waterfall-slot>
    </waterfall>
</template>

<script>
    import Waterfall from 'vue-waterfall/lib/waterfall.vue';
    import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot';
    import vEmployee from './Employee.vue';
    export default {
        props: {
            param: ''
        },
        data: function () {
            return {
                allData: false,
                loading: true,
                allItems: [],
                items: [],
                rows: 18,//显示数量
                page: 1,//当前页数
                totalPage: 1,//总页数
                Employee: [],

            }
        },
        mounted: function () {
            this.$$("#content").scrollTop(0)
            let self = this;
            this.rows = Math.floor(self.$$("#content")[0].scrollWidth / 230) * Math.floor(self.$$("#content").innerHeight() / 260)
            this.$$("#content").on('scroll', function (e) {
                var scrollTop = self.$$("#content").scrollTop();
                var innerHeight = self.$$("#content").innerHeight();
                var scrollHeight = self.$$("#content").scrollHeight();
                if (scrollTop + innerHeight >= scrollHeight) {
                    self.page++;
                    self.loading = true;
                    self.loadMore();
                }
            })
            this.loadMore();
        },
        watch: {
            param(val){
                this.items = [];
                this.page = 1;
                this.totalPage = 1;
                this.loading = true;
                this.loadMore();
            }
        },
        methods: {
            loadMore: function () {
                let self = this;
                if (this.page <= this.totalPage) {
                    this.$axioxs.get("/user/prize/jobs/?rows=" + this.rows + "&page=" + this.page + "&params=" + this.param)
                        .then(function (res) {
                                self.totalPage = res.data.totalPage;
                                self.allItems = res.data.records;
                                self.allItems.forEach(item => {
                                    item.height = 260;
                                    item.width = 230;
                                    self.items.push(item);
                                });
                                self.loading = false;
                            },
                            (res) => {
                                this.$message({
                                    showClose: true,
                                    type: 'error',
                                    message: res
                                });
                                this.loading = false;
                            });
                } else {
                    this.allData = true;
                    this.loading = false;
                }
            },
            getEmployee(res) {
                this.Employee.push(res);
                this.setEmployee();
            },
            deleteEmployee(res){
                let self = this;
                var arr = [];
                for (var i = 0; i < self.Employee.length; i++) {
                    if (res != self.Employee[i]) {
                        arr.push(self.Employee[i]);
                    }
                }
                ;
                this.Employee = arr;
                this.setEmployee();
            },
            setEmployee() {
                this.$emit('transferEmployee', this.Employee);
            }
        },
        components: {
            vEmployee, Waterfall, WaterfallSlot
        }
    }
</script>

<style scoped>
    .item {
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        font-size: 1.2em;
        color: rgb(0, 158, 107);
    }
</style>
